<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href = "<?php echo base_url(); ?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $product['name']; ?></title>

<?php
	include 'public/views/header.php';
	include 'public/home/html/banner.php';
	// include 'public/home/html/lazy_load.php';
	// include 'public/home/html/bootstrap.php';
?>
<script src="public/home/js/product.js"></script>
<link rel="stylesheet" type="text/css" href="public/append/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
	*{
		padding:0px;
		margin:0px;
	}
	body{
		overflow-x: hidden;
		max-width:400px;
		margin:auto;
		background-color:white;
	}
	a{
		text-decoration:none;
		color:#fff; 
	}


	/*顶部，标题*/
	.head{
		width: 100%;
		height: 60px;
		background: #f2f2f2;
	}
	.head .col-xs-3,.head .col-xs-6{
		height:60px;
	}
	.head .col-xs-6{
		text-align: center;
	}
	.head .col-xs-3 img{
		height: 26px;
		width: 30px;
		margin-top: 17px;
	}
	.head .col-xs-6 img{
		height: 50px;
		width: auto;
		 margin-top: 5px;
	}
	.title{
		width:88%;
		margin-left:6%;
		margin-top: 20px;
	}
	.title-font{
		color: #a53942;
		font-weight:bold;
		font-size:16px;
	}
	.title-line{
		height: 3px;width:18px;background: #a53942;
	}


	.rich-text{
		width:96%;
		margin-left:2%;
		overflow-x: hidden;
		height:auto;
		background-color: white;
	}

	.pdf{
		width:96%;
		margin-left: 2%;
		padding-bottom:20px;
	}
	.pdf-item{
		width:36%;
		margin-top:20px;
		margin-right: 0px;
		display: inline-block;
		height:210px;
		border-radius: 2px;
		box-shadow: 0px 0px 12px #999;
		overflow: hidden;
	}
	.pdf-item:nth-child(odd){
		margin-left:11%;
		margin-right: 2%;
	}
	.pdf-item:nth-child(even){
		margin-right:11%;
		margin-left: 2%;
	}

	.pdf-img{
		width:100%;
		height:160px;
	}
	.pdf-name{
		height:25px;
		line-height: 30px;
		text-align: center;
		font-size:12px;
		color:#848484;
		letter-spacing:1px;
	}
	.pdf-size{
		height:25px;
		line-height: 20px;
		text-align: center;
		font-size:12px;
		color:#848484;
	}
	.pdf-size img{
		height:15px;
		width:15px;
		position: relative;
		left:-5px;
		top:3px;
	}

	/*基础信息*/
	.base-info{
		height:auto;
		width:88%;
		margin-left: 6%;
		/*line-height: 35px;*/
		margin-top:10px;
		margin-bottom:20px;
		text-align: center;
	}
	.base-info p{
		display: block;
		/*height:35px;*/
		height:auto;
		width:100%;
		word-wrap: break-word;word-break: break-all;overflow: hidden;
	}
	.base-info p:nth-child(1){
		font-weight:bold;
		color:#333;
		font-size:24px;
		/*line-height: 35px;*/
		padding:3px 0px;
	}
	.base-info p:nth-child(2){
		color:#333;
		font-size:16px;
		padding:5px 0px;
		
	}
	.base-info p:nth-child(3){
		color:#878787;
		font-size:12px;
		padding:1px 0px;
	}
	

	/*详细信息*/
	.info-title{
		height:40px;
		line-height: 40px;
		width:88%;
		margin-left:6%;
		/*background-color: red;*/
		border-top:1px solid #F3F3F3;
		color:#3F3E3D;
		font-size: 12px;
	}
	.info-title img{
		height:16px;
		width:16px;
		float: right;
		margin-top: 12px;
		cursor: pointer;
	}
	.info-title img:nth-child(2){
		display: none;
	}
	.info-item{
		padding:20px 6%;
		color:#858789;
		font-size: 12px;
		padding-top:0px;
		display: none;
	}
	.color-item{
		width:32%;
		height:70px;
		/*display: inline-block;*/
		float: left;
		/*background-color: red;*/
		word-wrap: break-word;word-break: break-all;overflow: hidden;
	}
	.color-img{
		width:60%;
		margin-left: 20%;
		height:30px;
		margin-top:10px;
		border:1px solid #999;
	}
	.color-name{
		height:20px;
		width:100%;
		line-height: 30px;
		text-align: center;
	}
	.design-img{
		width:100%;
		height:auto;
	}

	/*底部按钮*/
	.foot{
		height:70px;
		line-height: 70px;
		width:100%;
		border:1px solid #898989;
		position: fixed;
		bottom:0px;
		box-shadow: 0px -3px 3px #999;
		/*background-color: white;*/
		background-color: #BE7D75;
	}
	.foot-button{
		width: 33%;
		height:70px;
		text-align: center;
		display: inline-block;
		border-right:1px solid #868686;
		background-color: white;
		float: left;
	}
	.foot-button:last-child{
		background-color: #BE7D75;
		color:white;
		width:33%;
		border-right:none!important;
		float: right!important;
	}
	.foot-button img{
		height:30px;
		width:30px;
		margin-top:10px;
	}
	.foot-button i{
		font-size:20px;
		margin-top:17px;
	}
	.foot-button div{
		height:height:20px;
		line-height: 20px;
		font-size: 10px;
	}

</style>
</head>

<body>
	<input type="hidden" id="openid" value="<?php echo $openid ?>"/>
	<input type="hidden" id="product_id" value="<?php echo $product['id'] ?>"/>
	<!-- 轮播图 -->
	<div class="head">
		<div class="col-xs-3"></div>
		<div class="col-xs-6"><img src="<?php echo $_SESSION[SESS_CONFIG][DicKey::Logo[XPHEnum::Value]]['dic_value'] ?>" alt=""></div>
		<div class="col-xs-3"></div>
	</div>
	<!-- 轮播图 -->
	<?php if (isset($product['img'])&&count($product['img'])>0): ?>
	<div class="fluid_container">
        <div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_4">
			<?php foreach ($product['img'] as $k => $v): ?>
			<div data-thumb="<?php echo $v ?>" data-src="<?php echo $v ?>"></div>		
			<?php endforeach ?>
        </div><!-- #camera_wrap_3 -->
    </div>
    <div style="clear: both;"></div>	
	
	<div style="height:80px; width:100%;"></div>		
	<?php endif ?>
	
	<!-- 基础信息 -->
	<div class="base-info">
		<p><?php echo $product['code'] ?></p>
		<p><?php echo $product['name'] ?></p>
		<p><?php echo $product['series'] ?> 系列</p>
	</div>
	
	<!-- 内容开始 -->
	<div class="info-title">
		<span>尺寸</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon"/>
		</span>
	</div>
	<div class="info-item">
		长：<?php echo $product['long'] ?>mm 宽：<?php echo $product['wide'] ?>mm 高：<?php echo $product['high'] ?>mm
	</div>

	<div class="info-title">
		<span>颜色</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon"/>
		</span>
	</div>
	<div class="info-item">
		<?php if (count($product['color_img'])>0): ?>
		<?php foreach ($product['color_img'] as $k => $v): ?>
		<div class="color-item">
			<img src="<?php echo isset($v[0])?$v[0]:'' ?>" alt="颜色" class="color-img"/>
			<div class="color-name"><?php echo $k ?></div>
		</div>	
		<?php endforeach ?>	
		<?php else: ?>
			暂无数据
		<?php endif; ?>
		<div style="clear: both;"></div>
	</div>

	<div class="info-title">
		<span>图纸</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon"/>
		</span>
	</div>
	<div class="info-item">
		<?php if (count($product['design_img'])>0): ?>
		<?php foreach ($product['design_img'] as $k => $v): ?>
		<img src="<?php echo $v ?>" alt="设计图" class="design-img"/>	
		<?php endforeach ?>	
		<?php else: ?>
		暂无数据
		<?php endif; ?>
	</div>

	<div class="info-title">
		<span>可选规格</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon"/>
		</span>
	</div>
	<div class="info-item">
		<?php echo $product['specifications'] ?>
	</div>

	<div class="info-title">
		<span>在线预览</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon"/>
		</span>
	</div>
	<div class="info-item">
		暂无数据
	</div>
	
	<div style="height:80px; width:100%;"></div>
	<!-- 底部按钮 -->
<!-- 	<div class="foot">
		<div class="foot-button">
			<i class="fa fa-external-link" aria-hidden="true"></i>
			<div>分享</div>
		</div>
		<div class="foot-button collect-button">
			<?php if ($is_collect): ?>
			<i class="fa fa-heart" aria-hidden="true"></i>
			<div>取消收藏</div>
			<?php else: ?>	
			<i class="fa fa-heart-o" aria-hidden="true"></i>
			<div>收藏</div>
			<?php endif; ?>
			
		</div>
		<div class="foot-button">
			<i class="fa fa-map-marker" aria-hidden="true"></i>
			<div>查看门店</div>
		</div>
	</div> -->
</body> 
<script>
		jQuery(function(){

			jQuery('#camera_wrap_4').camera({

				height: (Number(jQuery(window).height())/2-80)+'px',

				loader: 'bar',

				pagination: false,

				thumbnails: true,

				hover: false,

				opacityOnGrid: false

			});


		});

		
	</script>

</html>